<div class="form-group clearfix">
  <div class="form-inline pull-left">
    <button type="button" class="btn btn-default" (click)="showAddModal();">新建账号</button>
  </div>
  <!--<div class="form-inline pull-right">-->
  <!--<select name="account_type" class="form-control">-->
  <!--<option value="0">管理员账号</option>-->
  <!--<option value="0">直客账号</option>-->
  <!--</select>-->
  <!--</div>-->
</div>

<div>
  <nz-spin [nzTip]="'正在读取账户列表...'" [nzSpinning]="_isSpinning" [nzSize]="'large'" class="admin-spin">
    <table class="table">
      <thead>
      <tr>
        <th>ID</th>
        <th>账号名称</th>
        <th>创建时间</th>
        <th>角色</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of accoutList;">
        <td>{{ item.id }}</td>
        <td>{{ item.user_name }}</td>
        <td>{{ item.created_at }}</td>
        <td style="width:300px;">
          <ng-container *ngIf="item.admin_to_role.length > 0">
            <span *ngFor="let role of item.admin_to_role">
              {{ role['get_role'] ? role['get_role']['role_name']:'' }}
            </span>
          </ng-container>
        </td>
        <td>
          <a href="javascript:;" (click)="showEditAccountModal(item.id)">修改权限</a> - <a href="javascript:;"
                                                                             (click)="showDelAccountModal(item.id)">删除</a>
        </td>
      </tr>
      </tbody>
    </table>

  </nz-spin>
  <div class="text-center">
    <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage"
                [(ngModel)]="currentPage"
                previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
                [boundaryLinks]="true" class="pagination-sm"></pagination>
  </div>
</div>

<div class="modal fade" bsModal #accountModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">{{ editId ? '编辑账号':'新建账号' }}</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="accountModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #addUserForm="ngForm" (ngSubmit)="editId ? editUserSubmit() : addUserSubmit()">
          <div class="form-group clearfix">
            <label class="col-md-2">账号名称</label>
            <div class="col-md-6" style="position: relative;">
              <input type="text" class="form-control" id="user_name" name="user_name" [(ngModel)]="addUser.user_name" (ngModelChange)="checkAccount($event,'add');"
                     required><span style="position:absolute;left:100%;white-space: nowrap;top:50%;transform: translateY(-50%);">账户至少3个字符</span>
            </div>
          </div>

          <div class="form-group clearfix">
            <label class="col-md-2">账户密码</label>
            <div class="col-md-6" style="position: relative;">
              <input type="password" class="form-control" id="password" name="password" (ngModelChange)="checkLength($event)" [(ngModel)]="addUser.password"
                     required><span style="position:absolute;left:100%;white-space: nowrap;top:50%;transform: translateY(-50%);">密码至少6位数</span>
            </div>
          </div>

          <!--<div class="form-group clearfix">-->
          <!--<label class="col-md-2">确认密码</label>-->
          <!--<div class="col-md-6">-->
          <!--<input type="text" class="form-control">-->
          <!--</div>-->
          <!--</div>-->

          <div class="form-group clearfix">
            <label class="col-md-2">账户角色</label>
            <div class="col-md-6">
              <nz-checkbox-group [(ngModel)]="checkRoles" (ngModelChange)="_log(checkRoles)"
                                 [ngModelOptions]="{standalone: true}"></nz-checkbox-group>
            </div>
          </div>

          <div class="form-group clearfix" *ngIf="editId">
            <label class="col-md-2">账户状态</label>
            <div class="col-md-6">
              <label nz-checkbox [(ngModel)]="admin_status" (ngModelChange)="_console($event)" [ngModelOptions]="{standalone: true}">
                <span>{{ admin_status ? '启用': '停用' }}</span>
              </label>
            </div>
          </div>

          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="accountModal.hide();passwordError = false;accountError = false;">取  消</button>
            <button class="btn btn-success btn-md-long" type="submit" [disabled]="!addUserForm.form.valid || passwordError || accountError">提  交</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" bsModal #editAccountModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">{{ editId ? '编辑账号':'新建账号' }}</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="editAccountModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #editUserForm="ngForm" (ngSubmit)="editUserSubmit()">
          <div class="form-group clearfix">
            <label class="col-md-2">账号名称</label>
            <div class="col-md-6" style="position:relative;">
              <input type="text" class="form-control" name="user_name" [(ngModel)]="editUser.user_name" (ngModelChange)="checkAccount($event,'edit');"
                     required><span style="position:absolute;left:100%;white-space: nowrap;top:50%;transform: translateY(-50%);">账户至少3个字符</span>
            </div>
          </div>

          <div class="form-group clearfix">
            <label class="col-md-2">账户密码</label>
            <div class="col-md-6" style="position: relative;">
              <input type="password" class="form-control" (focus)="inputPassword();" (blur)="recoveryPassword();" (ngModelChange)="consolePassword($event);"  name="password" [(ngModel)]="editUser.password"
                     required><span style="position: absolute;left:100%;white-space: nowrap;top:50%;transform: translateY(-50%);">密码至少6位数</span>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">账户角色</label>
            <div class="col-md-6">
              <nz-checkbox-group [(ngModel)]="checkRoles" (ngModelChange)="_log(checkRoles)"
                                 [ngModelOptions]="{standalone: true}"></nz-checkbox-group>
            </div>
          </div>

          <div class="form-group clearfix" *ngIf="editId">
            <label class="col-md-2">账户状态</label>
            <div class="col-md-6">
              <label nz-checkbox [(ngModel)]="admin_status" (ngModelChange)="_console($event)" [ngModelOptions]="{standalone: true}">
                <span>{{ admin_status ? '启用': '停用' }}</span>
              </label>
            </div>
          </div>

          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="cancel();">取  消</button>
            <button class="btn btn-success btn-md-long" type="submit" [disabled]="!editUserForm.form.valid || passwordError1 || accountError1">修  改</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" bsModal #deleteModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">确认</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="deleteModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>确定删除吗？</p>
        <div class="text-right mt20">
          <button class="btn btn-default btn-md-long" type="button" (click)="deleteModal.hide()">取消</button>
          <button class="btn btn-success btn-md-long" type="button" (click)="delUser();">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>
